<template>
  <div class="settingList">
    <div class="main">
      <div class="main_top">
        <el-button size="small" type="primary" @click="addPrize"
          >新增奖池奖品</el-button
        >
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button @click="handleEdit(scope.row.id)" size="mini" type="primary" >编辑</el-button>
        </template>
      </ex-table>
    </div>
    <add-diglog
      ref="childRef"
      v-if="detailDialog"
      :id="id"
      :path="path"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import addDiglog from "./jackpotSet/addDiglog";  
// api
import {
  jackpotPrizeList,
} from '@/api/blindBox/jackpotSet'

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "",
  components: {
    addDiglog,
  },
  mixins: [handlePageMixin],
  data() {
    
    return {
      loading: false,
      detailDialog: false,
      tableData: [],
      id: '',
      tableColumn: [
        { prop: "name", label: "奖品名称" },
        { prop: "worth", label: "奖品价值"},
        { prop: "validity", label: "有效期" },
        { prop: "num", label: "已发放数量"},
        { label: "操作", slot: true, slotName: "operate",width: '200' },
      ],
      filter: {
       
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.filter,
        ...this.pageOptions,
      };
      jackpotPrizeList(params)
        .then((res) => {
          const { total, records } = res.result;
          console.log("账号列表", records);
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectQueryType(value) {
      if (!value) {
        this.filter.userName = "";
      }
    },
    //新建子账号
    addPrize() {
      this.detailDialog = true;
      this.path = 'add'
    },
    //
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    
    //编辑
    handleEdit(id){
      this.id = id
      this.detailDialog = true;
      this.path = 'edit'
    },
  },
};
</script>
<style lang="scss" scoped>
.settingList{
    padding: 20px;
}
.top{
    display: flex;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    .pad{
        padding-right: 24px;
    }
    .time{
      
        .label{
            font-size: 14px;
            color: #606266;
        }
    }
}
.main{
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    .main_top{
        padding: 10px 0;
    }
}
</style>